﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="EarringsRecommendationWeb.index" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Shop Homepage - Start Bootstrap Template</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/face.css">
    <style>
        .btn-file {
            position: relative;
            overflow: hidden;
            font-size: 16px;
        }
        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }
    </style>

    <script src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });
    </script>
    <script type="text/javascript" src="js/toast.js"></script>
</head>
<body>
    <div class="alert alert-warning" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    <!-- Navigation -->
    <nav  id="form-nav-bar" class="navbar navbar-inverse navbar-static-top" role="navigation">

    </nav>
    <!-- Page Content -->
    <form runat="server" >
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <p class="lead">
                   <img src="img/ShopName.png" />
                </p>
                <div class="list-group">
                    <p>ขั้นตอนการเลือกต่างหูให้เหมาะกับตัวคุณ</p>
                    <a href="index.aspx" class="list-group-item active" >1. คำนวณรูปหน้า</a>
                    <a href="index2.aspx" class="list-group-item">2. ระบุข้อมูลอื่น ๆ ของผู้ใส่ต่างหู</a>
                    <a href="index3.aspx" class="list-group-item">ต่างหูที่ระบบแนะนำ</a>
                </div>
            </div>
            <div class="col-md-9">
                <!--Start 2014/31/12-->
                <div class="col-md-13" style="min-height: 550px;">
                    <div class="row">
                        <div class="col-md-6"style="margin-top: 30px;">
                            <span class="btn btn-default btn-file">เลือกรูป
                                <asp:FileUpload ID="FileUpload" runat="server"  />
                            </span>
                            <input type="hidden" id="hasFile" name="hasFile" value="false" runat="server" />
                            <input type="button" id="btn-undo" style="font-size:16px;" value="ย้อนกลับ" class="btn btn-default pull-right" />                        
                       </div>
                    </div>
                    <div class="row">
                        <div id="canvas-area" style="margin-top: 30px;">
                        </div>
                    </div>
                    <br />
                    <textarea runat="server" id="txtout" style="display: none;"></textarea>
                    <div id="Message" runat="server" class="hidden" style="position: absolute; left: 460px; top: 50px; height: 100px; width: 290px; border-style: solid; display: inline-block;">
                    </div>
                    <div class="panel panel-default" style="position: absolute; left: 460px; top: 50px; width: 290px; margin-top: 30px;">
                        <div class="panel-body">
                            <p id="txt-description" class="form-control-static"></p>
                        </div>
                    </div>
                    <div id="guide-image" style="position: absolute; left: 460px; top: 230px; height: 304px; width: 304px; border-style: solid; border-width: 2px; margin-top: -10px;">
                        <%--<img src="img/PointGuide.png" style="width: 296px; height: 296px;" />--%>
                    </div>
                </div>

                <div class="row"> 
                    <div class="panel panel-default" style="width:770px; margin-top: 30px;">
                      <div class="panel-heading">
                        <h3 class="panel-title" id="panel-jaw-title"></h3>
                      </div>
                      <div class="panel-body form-inline" id="div-jaw">
                        
                      </div>
                    </div>                  
                </div>
                <div class="row"> 
                    <div class="panel panel-default" style="width:770px; margin-top: 30px;">
                      <div class="panel-heading">
                        <h3 class="panel-title" id="panel-hairline-title">ลักษณะแนวไรผม</h3>
                      </div>
                      <div class="panel-body form-inline" id="div-hairline">
                        <div class="col-md-6 form-group">
                            <p class="form-control-static"><input type="radio" name="rdoHairline" value="Narrow" checked />&nbsp;&nbsp;&nbsp;แนวไรผมแคบ</p>
                            <img style="width : 120px;" src="Data/PersonalConfig/HairLine-Narrow.png"/>
                        </div>
                          <div class="col-md-6 form-group">
                            <p class="form-control-static"><input type="radio" name="rdoHairline" value="Wide" />&nbsp;&nbsp;&nbsp;แนวไรผมกว้าง</p>
                            <img style="width : 120px;" src="Data/PersonalConfig/HairLine-Wide.png"/>
                        </div>
                      </div>
                    </div>                  
                </div>
                <asp:button ClientIDMode="Inherit" Id="btnNextStep2" text="ถัดไป" runat="server" cssclass="btn btn-info" OnClick="NextStep2"/>
            </div>
        </div>
    </div>
    </form>  
    <!-- /.container -->
    <div class="container">
        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>
                        Copyright &copy; Your Website 2015
                    </p>
                </div>
            </div>
        </footer>
    </div>
  <!-- /.container -->
    
    <script src="js/fabric.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/draw.ui.js"></script>
    <script>
        $(window).load(function () {
            var msg = getParameterByName('msg');
            if (msg) {
                bootbox.dialog({
                    title: 'Warning',
                    message: '<div class="alert alert-warning" role="alert"><strong>' + msg + '</strong></div>'
                });//boobox
            }

            var previousImg = document.getElementById('previous-img');
            if (previousImg) {
                fabric.Image.fromURL(previousImg.src, function (oImg) {
                    oImg.selectable = false;
                    oImg.scaleToWidth(areaWidth);
                    canvas.add(oImg);
                    oImg.center();
                });
                //imageLoader.value = '';
                hasPhoto = true;

                bootbox.dialog({
                    title: 'Warning',
                    message: '<div class="alert alert-warning" role="alert">ไม่สามารถคำนวณรูปหน้าได้ กรุณาลองใหม่</div>'
                });//boobox
            }
        });

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }
    </script>

</body>
</html>
